<template>
    <div style="height: inherit;width: inherit;">
        <div class="adsf" ref="eCharts" style="height: 100%;width: 100%;"></div>
    </div>
</template>

<script>
    import BaseCharts from "./BaseCharts";

    export default {
        name: "FunnelCharts",
        mixins:[BaseCharts],
        mounted(){
            this.$nextTick(function (){
                this.draw();
            })
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"charts",key);
            },
            draw(){
                var option = {
                    title: {
                        text: this.i18n('list.funnel','漏斗图'),
                        subtext: this.i18n('list.pureFiction','纯属虚构')
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    toolbox: {
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        data: [this.i18n('toShow','展现'),this.i18n('click','点击'),this.i18n('access','访问'),this.i18n('consultation','咨询'),this.i18n('order','订单')]
                    },
                    series: [
                        {
                            name:this.i18n('list.funnel','漏斗图'),
                            type:'funnel',
                            left: '10%',
                            top: 60,
                            //x2: 80,
                            bottom: 60,
                            width: '80%',
                            // height: {totalHeight} - y - y2,
                            min: 0,
                            max: 100,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: 'descending',
                            gap: 2,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 20
                                }
                            },
                            data: [
                                {value: 60, name: this.i18n('access','访问')},
                                {value: 40, name: this.i18n('consultation','咨询')},
                                {value: 20, name: this.i18n('order','订单')},
                                {value: 80, name: this.i18n('click','点击')},
                                {value: 100, name: this.i18n('toShow','展现')}
                            ]
                        }
                    ]
                };
                this.drawCharts(option);
            }
        }
    }
</script>

<style scoped>

</style>